<template>
  <div class="mobile-tabbar mobile-only safe-area-inset-bottom" v-if="isMobile">
    <div class="tabbar-content">
      <router-link 
        v-for="tab in tabs" 
        :key="tab.path"
        :to="tab.path" 
        class="tab-item"
        :class="{ active: isTabActive(tab.path) }"
      >
        <div class="tab-icon">
          <el-icon><component :is="tab.icon" /></el-icon>
        </div>
        <div class="tab-text">{{ tab.text }}</div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { House, Reading, User, Star, Setting } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const isMobile = ref(false)
const userStore = useUserStore()
const route = useRoute()

// 检查是否是管理员
const isAdmin = computed(() => {
  return userStore.isAdmin
})

// 底部导航配置
const tabs = computed(() => {
  const baseTabs = [
  {
    path: '/',
    text: '首页',
    icon: House
  },
  {
    path: '/bookshelf',
    text: '书架',
    icon: Reading
  },
  {
    path: '/ranking',
    text: '排行',
    icon: Star
    }
  ]

  // 如果是管理员，显示管理中心；否则显示个人中心
  if (isAdmin.value) {
    baseTabs.push({
      path: '/admin/users',
      text: '管理',
      icon: Setting
    })
  } else {
    baseTabs.push({
    path: '/profile',
    text: '我的',
    icon: User
    })
  }

  return baseTabs
})

// 判断标签是否激活
const isTabActive = (path: string) => {
  if (path === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(path)
}

// 检测是否为移动端
const checkMobile = () => {
  const userAgent = navigator.userAgent
  const mobileKeywords = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
  isMobile.value = mobileKeywords.test(userAgent) || window.innerWidth <= 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})
</script>

<style scoped>
/* 移动端底部导航样式已在mobile.scss中定义 */
</style> 